<template> 
<div class="FlipClock">
   <Flipper ref="flipperHour1" /> 
   <Flipper ref="flipperHour2" /> 
   <em>:</em> <Flipper ref="flipperMinute1" /> 
   <Flipper ref="flipperMinute2" /> <em>:</em> 
   <Flipper ref="flipperSecond1" /> <Flipper ref="flipperSecond2" /> 
   </div>
</template> 
<script>
var num=function(n) {
return n < 10 ? '0' + n : '' + n
}
import Flipper from './Flipper'
export default { 
  name: 'FlipClock', 
  data() { 
    return {
      h:0,
      m:0,
      s:10,
      Ssum:0,
     timer: null,
     flipObjs: []
      } }, 
    components: { Flipper }, 
    methods: {
       // 初始化数字 
    init() { 
    let nowTimeStr = '000010'
     for (let i = 0; i < this.flipObjs.length; i++) 
     { this.flipObjs[i].setFront(nowTimeStr[i]) } }, 
     // 开始到计时 
     run() {
      this.Ssum=this.h*60*60+this.m*60+this.s
      this.timer = setInterval(() => { 
      let nowTimeStr = num(this.h)+num(this.m)+num(this.s)
      this.Ssum-=1
       let nextH=Math.floor(this.Ssum/3600)
       let nextM=Math.floor((this.Ssum-nextH*3600)/60)
       let nextS=Math.floor(this.Ssum-nextH*3600-nextM*60)
       let nextTimeStr = num(nextH)+num(nextM)+num(nextS)
       for (let i = 0; i < this.flipObjs.length; i++) { 
         if (nowTimeStr[i] === nextTimeStr[i]){ 
           continue } 
          this.flipObjs[i].flipDown( nowTimeStr[i], nextTimeStr[i] ) }
          this.h=nextH
          this.m=nextM
          this.s=nextS
         if(this.Ssum<=0){
          this.$Message.error('考试时间已到!')
           clearInterval(this.timer)
           this.Ssum=0
         }
          },
           1000)
    
        },       
    
         // 日期时间补零 
          padLeftZero(str) { return ('00' + str).substr(str.length) } }, 
            mounted() {
                         this.flipObjs = [ 
                         this.$refs.flipperHour1, this.$refs.flipperHour2, 
                         this.$refs.flipperMinute1, this.$refs.flipperMinute2, 
                         this.$refs.flipperSecond1, this.$refs.flipperSecond2 ] 
                         this.init()
                         this.run() 
                         }}
 </script>
 <style>
.FlipClock {
  text-align: center;
}
.FlipClock .M-Flipper {
  margin: 0 3px;
}
.FlipClock em {
  display: inline-block;
  line-height: 51px;
  font-size: 33px;
  font-style: normal;
  vertical-align: top;
  color: black
}
</style>